<template>
        <card class="task-con">
            <p slot="title">派单</p>
            <span slot="extra" @click.prevent="remove">
                <Icon type="close-round" color="#495060"></Icon>
            </span>
            <Form inline ref="formValidate" :model="formValidate" :rules="ruleValidate">
                <Row>
                    <Col span="10">
                        <FormItem label="处理组" :label-width="80" prop="nextHandlerGroupName">
                          <organizationGroup  v-on:changeOrganType="changeOrganType" ></organizationGroup>
                        </FormItem>
                    </Col>
                    <Col  offset="3" span="8">
                        <FormItem label="转派处理人" :label-width="80" prop="handlerOptionList">
                            <handler :data="options.handlerOptionList" v-on:getHandlerData="getHandlerData"></handler>
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span="12" style="margin-left:80px;">
                        <FormItem>
                            <Button type="primary" @click="assignTask">提交</Button>
                        </FormItem>
                    </Col>
                </Row>
            </Form>
        </card>
    </template>
<style scoped>
    .task-con {
        width: 600px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -300px;
        margin-top: -100px;
        z-index: 200;
        text-align: left;
        box-shadow: 0 0 10px 1px;
        font-size: 12px;
    }
    
    .ivu-card:hover {
        box-shadow: 0 0 10px 1px;
    }
    
    .line {
        width: 100%;
        height: 1px;
        border-top: solid 1px #eaeaea;
        margin: 10px 0 10px 0;
    }
</style>
<script>
    import {
        mapGetters
    } from 'vuex'
    import taskService from 'service/taskService.js'
    import configService from 'service/configService.js'
    import organizationGroup from 'components/formItem/organizationGroup.vue'
    import handler from 'components/formItem/handler.vue'
    export default {
        name: 'assignTask',
        props: {
            data: Object,
            remove: Function,
            getTaskLogList: Function
        },
        components: {
            organizationGroup,
            handler
        },
        computed: {
            ...mapGetters({
                loginUserInfo: 'loginUserInfo',
                untreatedNum: 'untreatedNum'
            })
        },
        data() {
            return {
                formValidate: {
                    nextHandlerGroupId: "",
                    nextHandlerGroupName: "",
                    nextHandlerName: '',
                    nextHandlerId: ''
                },
                options: {
                    handlerGroupOptionList: [],
                    handlerOptionList: []
                },
                ruleValidate: {
                    nextHandlerGroupName: [{
                        required: true,
                        message: '请选择处理组！',
                        trigger: 'change'
                    }]
                }
            }
        },
        methods: {
            async assignTask() {
                let handlerInfodata = {
                        "curHandlerGroupId": this.loginUserInfo.curHandlerGroupId,
                        "curHandlerGroupName": this.loginUserInfo.curHandlerGroupName,
                        "curHandlerName": this.loginUserInfo.curHandlerName,
                        "curHandlerId": this.loginUserInfo.curHandlerId
                    }
                    // console.log("----",this.loginUserInfo);

                let ticketIds = []
                if (Array.isArray(this.data.propId)) {
                    ticketIds = this.data.propId
                } else {
                    ticketIds.push(this.data.propId)
                }

                let data = Object.assign(this.formValidate, handlerInfodata, {
                    'ticketIds': ticketIds,
                    "errorFlag": this.data.errorFlag,
                    "errorInfo": this.data.errorInfo,
                    "remark": this.data.remark
                })
                let jsondata = await taskService.assignTask(data);

                if (jsondata.state) {
                    this.remove()
                    this.$Message.success(jsondata.msg);
                    this.$store.dispatch('getuntreatedNum', this.loginUserInfo.curHandlerId)
                    this.$router.push({
                        name: 'taskpending_index'
                    })

                    eventBus.$emit('refreshTaskPendingList')

                } else {
                    this.$Message.warning(jsondata.msg);
                }
            },
            // 根据组织架构的groupId 获得 该组成员列表
            changeOrganType(data) {
                let index = parseInt(data.selectedData.length - 1)
                this.formValidate.nextHandlerGroupId = data.selectedData[index].value
                this.formValidate.nextHandlerGroupName = data.selectedData[index].label
                this.getHanderList({
                    "orgIdList": this.formValidate.nextHandlerGroupId
                })
            },
            // 根据组织架构的groupId 获得 该组成员列表
            async getHanderList(data) {
                let jsondata = await configService.getUsersByGroupId(data)
                this.options.handlerOptionList = jsondata

            },
            //监听handler组件中 change事件
            getHandlerData(data) {
                this.formValidate.nextHandlerId = data.value
                this.formValidate.nextHandlerName = data.label
            },
        }
    }
</script>